<template>
  <div class="goods-list">
    <GoodsCard @after-add-cart-effect="afterAddCartEffect" @add-cart="onAddCart(goods)" :show-add-cart="showAddCart" class="goods-card"
      v-for="goods in data" :data="goods"></GoodsCard>
  </div>
</template>
<script setup lang="ts">
import { increaseCount } from '@/hooks/useCounter';
import GoodsCard from '@/components/a/GoodsCard.vue'
const props = defineProps<{
  data: GoodsData[]
  showAddCart?: boolean,
  bindCounter?: string
}>()
const emit = defineEmits(['add-cart'])
const onAddCart = (goods: GoodsData) => {
  if(props.bindCounter && !props.showAddCart){
    increaseCount(props.bindCounter)
  }
  emit('add-cart', goods)
}
const afterAddCartEffect = () => {
  if(props.bindCounter){
    increaseCount(props.bindCounter)
  }
}
</script>
<style lang="scss">
.goods-list {
  display: grid;
  grid-template-columns: repeat(5, 230px);
  column-gap: 5px;
  row-gap: 5px;

  .goods-card {
    height: 300px;
  }
}
</style>
